﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link href="../../resources/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />

    <script src="../../resources/lib/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="../../resources/lib/jquery/jquery.form.min.js" type="text/javascript"></script>
    <script src="../../resources/lib/ligerUI/js/ligerui.all.js" type="text/javascript"></script>
    <script type="text/javascript">
        var tree = null;
        var addNew = false;
        var myaccount = '../../resources/lib/ligerUI/skins/icons/myaccount.gif';
        var memeber = '../../resources/lib/ligerUI/skins/icons/memeber.gif';
        var archives = '../../resources/lib/ligerUI/skins/icons/archives.gif';
        $(function () {
            tree = $("#tree2").ligerTree({
                checkbox: false,
                data: [
                    { text: '系统控制器1', id:"1", type:"mc"},
                    { text: '系统控制器2', id:"2", type:'mc'},
                    { text: '系统控制器3', id:"3", type:'mc'},

                    { text: '门控器1', id:"1.1", pid:"1", type:'dc'},
                    { text: '门控器2', id:"1.2", pid:"1", type:'dc'},

                    { text: '门', id:"1.1.1", pid:"1.1", icon: archives, type:'door' },
                    { text: '读卡器', id:"1.1.2", pid:"1.1", icon: myaccount, type:'reader' },
                    { text: '输入', id:"1.1.3", pid:"1.1", type:'input' },
                    { text: '继电器', id:"1.1.4", pid:"1.1", type:'relay' }
                ],
                idFieldName :'id',
                parentIDFieldName :'pid',
                onSelect: function(node, target) {
                    addNew = false;
                    if (node.data == null) {
                        return;
                    }
                    var type = node.data.type;
                    if (type == 'mc') {
                        $("#dcForm").hide();
                        $("#doorForm").hide();
                        $("#readerForm").hide();
                        $("#inputForm").hide();
                        $("#relayForm").hide();
                        $("#mcForm").show();

                        $("#mcForm input[name=name]").val(node.data.text);
                        $("#mcForm input[name=id]").val(node.data.id);

                        $("#addDCItemBtn").show();
                        $("#addDoorItemBtn").hide();
                    } else if (type == 'dc') {
                        $("#mcForm").hide();
                        $("#doorForm").hide();
                        $("#readerForm").hide();
                        $("#inputForm").hide();
                        $("#relayForm").hide();
                        $("#dcForm").show();

                        $("#dcForm input[name='name']").val(node.data.text);
                        $("#dcForm input[name=id]").val(node.data.id);
                        $("#dcForm input[name=pid]").val(null);// 删除pid属性

                        $("#addDCItemBtn").show();
                        $("#addDCItemBtn").hide();
                        $("#addDoorItemBtn").show();
                    } else if (type == 'door') {
                        $("#mcForm").hide();
                        $("#dcForm").hide();
                        $("#readerForm").hide();
                        $("#inputForm").hide();
                        $("#relayForm").hide();
                        $("#doorForm").show();

                        $("#doorForm input[name='name']").val(node.data.text);
                        $("#doorForm input[name=id]").val(node.data.id);
                        $("#doorForm input[name=pid]").val(null);// 删除pid属性

                        $("#addDCItemBtn").hide();
                        $("#addDoorItemBtn").hide();
                    } else if (type == 'reader') {
                        $("#mcForm").hide();
                        $("#dcForm").hide();
                        $("#inputForm").hide();
                        $("#relayForm").hide();
                        $("#readerForm").show();
                        $("#doorForm").hide();
                    } else if (type == 'input') {
                        $("#mcForm").hide();
                        $("#dcForm").hide();
                        $("#inputForm").show();
                        $("#relayForm").hide();
                        $("#readerForm").hide();
                        $("#doorForm").hide();
                    } else if (type == 'relay') {
                        $("#mcForm").hide();
                        $("#dcForm").hide();
                        $("#inputForm").hide();
                        $("#relayForm").show();
                        $("#readerForm").hide();
                        $("#doorForm").hide();
                    }
                }
            });
            //$("form").ligerForm();
            $('#mcForm').ajaxForm(function() {
                alert("mc form ajax submit end!");
            });
            $('#dcForm').ajaxForm(function() {
                alert("dc form ajax submit end!");
            });
            $('#doorForm').ajaxForm(function() {
                alert("door form ajax submit end!");
            });

            //$("form input[name=txtDate]").ligerDateEditor();
            //$("form input:radio").ligerRadio();
        });
        function reload() {
            tree.clear();
            var data = [
                { text: '系统控制器1', id:"1", type:"mc"},
                { text: '系统控制器2', id:"2", type:'mc'},
                { text: '系统控制器3', id:"3", type:'mc'},

                { text: '门控器1', id:"1.1", pid:"1", icon: myaccount, type:'dc'},
                { text: '门控器2', id:"1.2", pid:"1", icon: myaccount, type:'dc'},

                { text: '1号门', id:"1.1.1", pid:"1.1", icon: archives, type:'door' },
                { text: '2号门', id:"1.1.2", pid:"1.1", icon: archives, type:'door' }
            ];
            tree.setData(data);
            //tree.loadData(null, 'tree.json');
        }

        function addMCItem() {
            $("#dcForm").hide();
            $("#doorForm").hide();
            $("#mcForm input[type=reset]").click();
            $("#mcForm input[name='name']").val("新建系统控制器");
            //var node = tree.getSelected();
			$("#mcForm input[name=id]").val(null);// 删除id属性
            $("#mcForm").show();
            addNew = true;
        }
        function addDCItem() {
            $("#mcForm").hide();
            $("#doorForm").hide();
            $("#dcForm input[type=reset]").click();
            $("#dcForm input[name='name']").val("新建门控器");
            var node = tree.getSelected();
			$("#dcForm input[name=id]").val(null);// 删除id属性
			$("#dcForm input[name=pid]").val(node.data.id);// 设置pid属性
            $("#dcForm").show();
        }
        function addDoorItem() {
            $("#mcForm").hide();
            $("#dcForm").hide();
            $("#doorForm input[type=reset]").click();
            $("#doorForm input[name='name']").val("新建门");
            var node = tree.getSelected();
			$("#doorForm input[name=id]").val(null);// 删除id属性
			$("#doorForm input[name=pid]").val(node.data.id);// 设置pid属性
            $("#doorForm").show();
        }
        function updateItem() {

        }
        function removeItem() {

        }
    </script>
    <style type="text/css">
        .l-table-edit {}
        .l-table-edit-td{ padding:4px;}
        .l-button-submit,.l-button-reset{width:80px; float:left; margin-left:10px; padding-bottom:2px;}
        form fieldset {
            border: solid #CCCCCC 1px;
            padding: 10px;
        }
        form fieldset legend {
            padding: 0 2px;
        }
    </style>
</head>
<body id="layout1" style="width:100%; margin:0 auto;">
    <div style="position:absolute; left: 5px; top: 5px; right: 5px; height: 25px; ">
        <a class="l-button" onclick="reload()" style="float:left;margin-right:10px;">重新加载</a>
    
        <a class="l-button" onclick="addMCItem()" style="float:left;margin-right:10px; width: 80px;">添加系统控制器</a>
        <a class="l-button l-hidden" id="addDCItemBtn" onclick="addDCItem()" style="float:left;margin-right:10px; width: 80px;">添加门控制器</a>
        <a class="l-button l-hidden" id="addDoorItemBtn" onclick="addDoorItem()" style="float:left;margin-right:10px;">添加门</a>
        <a class="l-button" onclick="updateItem()" style="float:left;margin-right:10px;">更新</a>
        <a class="l-button" onclick="removeItem()" style="float:left;margin-right:10px;">删除</a>
        <br style="clear: both;" />
    </div>

    <div style="position:absolute; left: 5px; top: 35px; bottom: 5px; width: 190px; border:1px solid #ccc; overflow:auto;  ">
        <ul id="tree2">
        </ul>
    </div>

    <div style="position:absolute; left: 202px; right: 5px; top: 35px; bottom: 5px; border:1px solid #ccc; overflow:auto; padding: 5px;">
        <div id="dialog_target"  style="margin:5px;">

            <form class="l-hidden" name="mcForm" method="post" action="" id="mcForm">
                <div id="navtab1" style="width: 900px; overflow: hidden; border: 1px solid #D3D3d3;" class="liger-tab">
                    <div tabid="home" title="通用设置" lselected="true" style="height: 300px">
                        <div style="padding: 5px;">

                            <fieldset style="float: left;">
                                <legend>基本信息</legend>
                                <table cellpadding="0" cellspacing="0" class="l-table-edit" >
                                    <tr>
                                        <td align="right" class="l-table-edit-td">名称:</td>
                                        <td align="left" class="l-table-edit-td">
                                            <input name="name" type="text" id="txtName" ltype="text" />
                                        </td>
                                        <td align="left"></td>
                                    </tr>
                                    <tr>
                                        <td align="right" class="l-table-edit-td" valign="top">使用:</td>
                                        <td align="left" class="l-table-edit-td">
                                            <input id="rbtnl_0" type="radio" name="used" value="true" checked="checked" />是
                                            &nbsp;&nbsp;
                                            <!--<label for="rbtnl_0">是</label>-->
                                            <input id="rbtnl_1" type="radio" name="used" value="false" />否
                                            <!--<label for="rbtnl_1">否</label>-->
                                        </td><td align="left"></td>
                                    </tr>

                                    <tr>
                                        <td align="right" class="l-table-edit-td">安装日期:</td>
                                        <td align="left" class="l-table-edit-td">
                                            <input name="txtDate" type="text" ltype="date" />
                                        </td><td align="left"></td>
                                    </tr>
                                    <tr>
                                        <td align="right" class="l-table-edit-td">备注:</td>
                                        <td align="left" class="l-table-edit-td">
                                            <textarea cols="100" rows="4" class="l-textarea" style="width:150px"></textarea>
                                        </td><td align="left"></td>
                                    </tr>
                                </table>
                            </fieldset>
                            <fieldset style="float: left; margin-left: 10px;">
                                <legend>物理信息</legend>
                                <table cellpadding="0" cellspacing="0" class="l-table-edit" >
                                    <tr>
                                        <td align="right" class="l-table-edit-td">IP:</td>
                                        <td align="left" class="l-table-edit-td">
                                            <input name="ip" type="text" id="ip" class="liger-textbox" />
                                        </td>
                                        <td align="left"></td>
                                    </tr>
                                    <tr>
                                        <td align="right" class="l-table-edit-td">端口:</td>
                                        <td align="left" class="l-table-edit-td">
                                            <input name="port" type="text" id="port" ltype="text" />
                                        </td>
                                        <td align="left"></td>
                                    </tr>
                                </table>
                            </fieldset>
                            <div style="clear: both; padding-top: 10px;">
                                <input type="hidden" name="id" />
                                <input type="submit" value="提交" class="l-button l-button-submit" />
                                <input type="reset" value="重置" class="l-button l-button-reset"/>
                                <br class="l-clear" />
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        <!--主控器表单设置-->
        <!--<form class="l-hidden" name="mcForm" method="post" action="" id="mcForm">-->
            <!--<br />-->
            <!--<input type="hidden" name="id" />-->
            <!--<input type="submit" value="提交" class="l-button l-button-submit" />-->
            <!--<input type="reset" value="重置" class="l-button l-button-reset"/>-->
            <!--<br class="l-clear" />-->
        <!--</form>-->

        <!--门控器表单设置-->
        <form class="l-hidden" name="dcForm" method="post" action="" id="dcForm">
            <div id="navtab2" style="width: 900px; overflow: hidden; border: 1px solid #D3D3d3;" class="liger-tab">
                <div tabid="home" title="通用设置" lselected="true" style="padding: 5px;">
                    <div>
                        <table cellpadding="0" cellspacing="0" class="l-table-edit" >
                            <tr>
                                <td align="right" class="l-table-edit-td">名称:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input name="name" type="text" ltype="text" />
                                </td>
                                <td align="left"></td>
                            </tr>

                            <tr>
                                <td align="right" class="l-table-edit-td">安装日期:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input name="txtDate" type="text" ltype="date" />
                                </td><td align="left"></td>
                            </tr>
                            <tr>
                                <td align="right" class="l-table-edit-td">型号:</td>
                                <td align="left" class="l-table-edit-td">
                                    <select name="ddlDepart" id="ddlDepart" ltype="select">
                                        <option value="1">M1</option>
                                        <option value="2">M2</option>
                                        <option value="3">M8</option>
                                        <option value="4">M16</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td align="right" class="l-table-edit-td" valign="top">使用:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input type="radio" name="used" value="true" checked="checked" />是
                                    &nbsp;&nbsp;
                                    <!--<label for="rbtnl_0">是</label>-->
                                    <input type="radio" name="used" value="false" />否
                                    <!--<label for="rbtnl_1">否</label>-->
                                </td><td align="left"></td>
                            </tr>
                            <tr>
                                <td align="right" class="l-table-edit-td">备注:</td>
                                <td align="left" class="l-table-edit-td">
                                    <textarea cols="100" rows="4" class="l-textarea" style="width:400px"></textarea>
                                </td><td align="left"></td>
                            </tr>
                        </table>
                        <br />
                        <input type="hidden" name="id" />
                        <input type="hidden" name="pid" />
                        <input type="submit" value="提交" class="l-button l-button-submit" />
                        <input type="reset" value="重置" class="l-button l-button-reset"/>
                        <br class="l-clear" />
                    </div>
                </div>
                <div title="安装设置" style="padding: 5px;">
                    <fieldset style="float: left;">
                        <legend>非法入侵</legend>
                        <label>超过允许重试次数或在超时时间内未通过验证将触发非法入侵报警，同时读卡器将闭锁。</label>
                        <table cellpadding="0" cellspacing="0" class="l-table-edit" >
                            <tr>
                                <td align="right" class="l-table-edit-td">允许重试次数:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input type="text" ltype="text" />
                                </td>
                                <td align="left"></td>
                            </tr>
                            <tr>
                                <td align="right" class="l-table-edit-td">超时时间:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input type="text" ltype="text" />
                                </td>
                                <td align="left">秒</td>
                            </tr>
                            <tr>
                                <td align="right" class="l-table-edit-td">闭锁时间:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input type="text" ltype="text" />
                                </td>
                                <td align="left">分钟</td>
                            </tr>
                        </table>
                    </fieldset>
                    <fieldset style="float: left; margin-left: 10px;">
                        <legend>选项</legend>
                        <label></label>
                        <table cellpadding="0" cellspacing="0" class="l-table-edit" >
                            <tr>
                                <td align="right" class="l-table-edit-td">胁迫报警模式使能:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input type="checkbox" ltype="checkbox" />
                                </td>
                                <td align="left"></td>
                            </tr>
                        </table>
                    </fieldset>
                    <fieldset style="float: left; margin-left: 10px;">
                        <legend>物理信息</legend>
                        <label></label>
                        <table cellpadding="0" cellspacing="0" class="l-table-edit" >
                            <tr>
                                <td align="right" class="l-table-edit-td">地址:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input type="text" ltype="text" value="1" />
                                </td>
                                <td align="left"></td>
                            </tr>
                            <tr>
                                <td align="right" class="l-table-edit-td">波特率:</td>
                                <td align="left" class="l-table-edit-td">
                                    <select ltype="select">
                                        <option value="1" selected="selected">9600</option>
                                        <option value="2">19200</option>
                                        <option value="3">38400</option>
                                        <option value="5">115200</option>
                                    </select>
                                    <!--<input type="text" ltype="text" value="9600" />-->
                                </td>
                                <td align="left"></td>
                            </tr>
                            <tr>
                                <td align="right" class="l-table-edit-td">数据位:</td>
                                <td align="left" class="l-table-edit-td">
                                    <select ltype="select">
                                        <option value="1" selected="selected">8</option>
                                        <option value="2">7</option>
                                        <option value="3">6</option>
                                        <option value="5">5</option>
                                    </select>
                                </td>
                                <td align="left"></td>
                            </tr>
                            <tr>
                                <td align="right" class="l-table-edit-td">停止位:</td>
                                <td align="left" class="l-table-edit-td">
                                    <select ltype="select">
                                        <option value="1" selected="selected">1</option>
                                        <option value="2">2</option>
                                        <option value="3">1.5</option>
                                    </select>
                                </td>
                                <td align="left"></td>
                            </tr>
                            <tr>
                                <td align="right" class="l-table-edit-td">校验:</td>
                                <td align="left" class="l-table-edit-td">
                                    <select>
                                        <option value="1" selected="selected">无</option>
                                        <option value="2">奇</option>
                                        <option value="3">偶</option>
                                    </select>
                                </td>
                                <td align="left"></td>
                            </tr>
                        </table>
                    </fieldset>
                    <fieldset style="float: left;">
                        <legend>报警继电器</legend>
                        <label></label>
                        <table cellpadding="0" cellspacing="0" class="l-table-edit" >
                            <tr>
                                <td align="right" class="l-table-edit-td">通用报警:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input type="text" ltype="text" />
                                </td>
                                <td align="left">秒</td>
                                <td align="right" class="l-table-edit-td">继电器序号:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input type="text" ltype="text" value="0" />
                                </td>
                                <td align="left"></td>
                            </tr>
                            <tr>
                                <td align="right" class="l-table-edit-td">胁迫报警:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input type="text" ltype="text" />
                                </td>
                                <td align="left">秒</td>
                                <td align="right" class="l-table-edit-td">继电器序号:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input type="text" ltype="text" value="0" />
                                </td>
                                <td align="left"></td>
                            </tr>
                            <tr>
                                <td align="right" class="l-table-edit-td">入侵报警:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input type="text" value="60" />
                                </td>
                                <td align="left">秒</td>
                                <td align="right" class="l-table-edit-td">继电器序号:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input type="text" ltype="text" value="0" />
                                </td>
                                <td align="left"></td>
                            </tr>
                            <tr>
                                <td align="right" class="l-table-edit-td">故障报警:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input type="text" ltype="text" />
                                </td>
                                <td align="left">秒</td>
                                <td align="right" class="l-table-edit-td">继电器序号:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input type="text" ltype="text" value="0" />
                                </td>
                                <td align="left"></td>
                            </tr>
                        </table>
                    </fieldset>
                    <div style="clear: both"></div>
                </div>
                <div title="防返传" style="padding: 5px;">

                    <fieldset style="float: left;">
                        <legend>返传入侵</legend>
                        <label></label>
                        <table cellpadding="0" cellspacing="0" class="l-table-edit" >
                            <tr>
                                <td align="right" class="l-table-edit-td">事件报告:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input type="checkbox" />
                                </td>
                                <td align="left"></td>
                            </tr>
                            <tr>
                                <td align="right" class="l-table-edit-td">报警:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input type="checkbox" />
                                </td>
                                <td align="left"></td>
                            </tr>
                            <tr>
                                <td align="right" class="l-table-edit-td">拒绝进入:</td>
                                <td align="left" class="l-table-edit-td">
                                    <input type="checkbox" />
                                </td>
                                <td align="left"></td>
                            </tr>
                        </table>
                    </fieldset>
                    <fieldset style="float: left; margin-left: 10px;">
                        <legend>选项</legend>
                        <label></label>
                        <table cellpadding="0" cellspacing="0" class="l-table-edit" >
                            <tr>
                                <td align="right" class="l-table-edit-td">时间组:</td>
                                <td align="left" class="l-table-edit-td">
                                    <select>
                                        <option>时间组1</option>
                                        <option>时间组2</option>
                                        <option>时间组3</option>
                                        <option>永远有效</option>
                                        <option>永远无效</option>
                                    </select>
                                </td>
                                <td align="left"></td>
                            </tr>
                        </table>
                    </fieldset>
                    <br style="clear: both;"/>
                    <br />
                    <input type="submit" value="提交" class="l-button l-button-submit" />
                    <input type="reset" value="重置" class="l-button l-button-reset"/>
                </div>

                <div title="报警联动" style="padding: 5px;">
                    <div id="Div4">
                        <form class="l-hidden" name="doorForm2" method="post" action="" id="doorForm4">
                            <table cellpadding="0" cellspacing="0" class="l-table-edit" >
                                <tr>
                                    <th></th>
                                    <th>开启门组</th>
                                    <th>关闭门组</th>
                                </tr>
                                <tr>
                                    <td align="right" class="l-table-edit-td">常规报警</td>
                                    <td align="left" class="l-table-edit-td">
                                        <select name="ddlDepart1" ltype="select">
                                            <option value="1">门组1</option>
                                            <option value="2">门组2</option>
                                            <option value="3">门组3</option>
                                            <option value="0">无</option>
                                        </select>
                                    </td>
                                    <td align="left" class="l-table-edit-td">
                                        <select name="ddlDepart2" ltype="select">
                                            <option value="1">门组1</option>
                                            <option value="2">门组2</option>
                                            <option value="3">门组3</option>
                                            <option value="0">无</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right" class="l-table-edit-td">入侵报警</td>
                                    <td align="left" class="l-table-edit-td">
                                        <select name="ddlDepart1" ltype="select">
                                            <option value="1">门组1</option>
                                            <option value="2">门组2</option>
                                            <option value="3">门组3</option>
                                            <option value="0">无</option>
                                        </select>
                                    </td>
                                    <td align="left" class="l-table-edit-td">
                                        <select name="ddlDepart2" ltype="select">
                                            <option value="1">门组1</option>
                                            <option value="2">门组2</option>
                                            <option value="3">门组3</option>
                                            <option value="0">无</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right" class="l-table-edit-td">故障报警</td>
                                    <td align="left" class="l-table-edit-td">
                                        <select name="ddlDepart1" ltype="select">
                                            <option value="1">门组1</option>
                                            <option value="2">门组2</option>
                                            <option value="3">门组3</option>
                                            <option value="0">无</option>
                                        </select>
                                    </td>
                                    <td align="left" class="l-table-edit-td">
                                        <select name="ddlDepart2" ltype="select">
                                            <option value="1">门组1</option>
                                            <option value="2">门组2</option>
                                            <option value="3">门组3</option>
                                            <option value="0">无</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                            <br />
                            <input type="submit" value="提交" class="l-button l-button-submit" />
                            <input type="reset" value="重置" class="l-button l-button-reset"/>
                            <br class="l-clear" />
                        </form>

                    </div>
                </div>
            </div>
        </form>
            <!--门表单设置-->
            <form class="l-hidden" name="doorForm" method="post" action="" id="doorForm" style="overflow: hidden;">
                <iframe src="hardware_door.html" style="width: 100%; height: 600px; border: none;">
                </iframe>
            </form>

            <form class="l-hidden" name="readerForm" method="post" action="" id="readerForm" style="overflow: hidden;">
                <iframe src="hardware_reader.html" style="width: 100%; height: 600px; border: none;">
                </iframe>
            </form>
            <form class="l-hidden" name="inputForm" method="post" action="" id="inputForm" style="overflow: hidden;">
                <iframe src="hardware_input.html" style="width: 100%; height: 600px; border: none;">
                </iframe>
            </form>
            <form class="l-hidden" name="relayForm" method="post" action="" id="relayForm" style="overflow: hidden;">
                <iframe src="hardware_relay.html" style="width: 100%; height: 600px; border: none;">
                </iframe>
            </form>
        </div>
    </div>

</body>
</html>
